Architektura pluginů JavaScript Module Federation: Budování dynamického pluginového systému

V dnešní složité krajině vývoje webu je klíčové vytvářet modulární, škálovatelné a udržitelné aplikace. Jednou z mocných technik, jak toho dosáhnout, je architektura pluginů, kde je funkcionalita rozdělena na nezávislé, dynamicky načítané moduly. JavaScript Module Federation, funkce Webpacku 5, poskytuje robustní mechanismus pro implementaci takových architektur. Tento článek se zabývá složitostmi použití Module Federation k vybudování dynamického pluginového systému.

Co je Module Federation?

Module Federation umožňuje JavaScriptovým aplikacím dynamicky sdílet kód za běhu. To znamená, že modul (část kódu) z jedné aplikace může být použit přímo jinou aplikací, aniž by bylo nutné ji znovu sestavit nebo nasadit. Toho je dosaženo vystavením a spotřebováním modulů napříč různými sestaveními a dokonce i různými nasazeními.

Tradiční metody sdílení kódu, jako jsou balíčky npm, vyžadují opětovné sestavení a nasazení spotřebovávajících aplikací pokaždé, když je aktualizována sdílená závislost. Module Federation tuto režii eliminuje, což je ideální pro scénáře, kde jsou vyžadovány časté aktualizace a nezávislá nasazení.

Proč používat Module Federation pro architektury pluginů?

Module Federation nabízí několik výhod při budování architektur pluginů:

• Dynamické načítání modulů: Pluginy lze načítat a odstraňovat za běhu, což umožňuje aplikacím přizpůsobit se měnícím se požadavkům, aniž by bylo nutné úplné opětovné nasazení.
• Dekupláž: Pluginy jsou vyvíjeny a nasazovány nezávisle, což snižuje závislosti mezi různými částmi aplikace.
• Škálovatelnost: Aplikaci lze snadno rozšířit o nové pluginy, aniž by to ovlivnilo stávající funkcionalitu.
• Udržitelnost: Pluginy lze aktualizovat a udržovat nezávisle, což snižuje riziko zavedení chyb do jádra aplikace.
• Znovupoužitelnost kódu: Pluginy lze znovu použít napříč více aplikacemi, což podporuje konzistenci a snižuje úsilí při vývoji.
• Verzování a vrácení změn: Můžete spravovat různé verze pluginů a v případě potřeby se snadno vrátit k předchozím verzím.

Klíčové koncepty: Hostitelský a vzdálený kontejner

Module Federation se točí kolem dvou klíčových konceptů:

• Hostitelský kontejner: Hlavní aplikace, která spotřebovává vzdálené moduly (pluginy).
• Vzdálený kontejner: Aplikace, která vystavuje moduly (pluginy) pro spotřebu hostitelem.

Hostitelský kontejner dynamicky načítá soubor vzdáleného vstupu (remote entry file) ze vzdáleného kontejneru, který obsahuje manifest vystavených modulů. Hostitel pak může k těmto modulům přistupovat a používat je, jako by byly součástí jeho vlastní kódové základny.

Implementace dynamického pluginového systému s Module Federation: Průvodce krok za krokem

Pojďme si projít proces budování jednoduchého pluginového systému pomocí Module Federation. Vytvoříme hostitelskou aplikaci a vzdálenou pluginovou aplikaci.

1. Nastavení hostitelské aplikace (Host Container)

Nejprve vytvořte nový projektový adresář a inicializujte nový npm projekt:

            mkdir host-app
cd host-app
npm init -y
            

              
                Copy
              
            
          

Nainstalujte Webpack a jeho závislosti:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Vytvořte soubor `webpack.config.js` v adresáři `host-app` s následující konfigurací:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3000,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Host',
      remotes: {
        'plugin': 'Plugin@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

Vysvětlení:

• `name`: Název hostitelské aplikace.
• `remotes`: Definuje vzdálené kontejnery, které hostitel bude spotřebovávat. V tomto případě spotřebovává vzdálený kontejner s názvem `plugin` z `http://localhost:3001/remoteEntry.js`. Syntax `Plugin@` znamená, že název `ModuleFederationPlugin` vzdáleného serveru je 'Plugin'.
• `shared`: Uvádí závislosti, které jsou sdíleny mezi hostitelským a vzdáleným kontejnerem. Tím se zabrání načítání duplicitních kopií těchto závislostí. Použití `shared` je kritické pro zamezení chyb a zajištění správné funkčnosti pluginů.

Vytvořte adresář `src` a přidejte soubor `index.js` s následujícím obsahem:

            import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';

const PluginComponent = React.lazy(() => import('plugin/PluginComponent'));

const App = () => {
  return (
    <div>
      <h1>Host Application</h1>
      <Suspense fallback={<div>Loading Plugin...</div>}>
        <PluginComponent />
      </Suspense>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

            

              
                Copy
              
            
          

Vysvětlení:

• Používáme `React.lazy` k dynamickému importu `PluginComponent` ze vzdáleného `pluginu`. To je klíčové pro líné načítání pluginu a zamezení počátečních prodlev při načítání.
• Komponenta `Suspense` se používá k obsluze stavu načítání, zatímco se plugin načítá.

Vytvořte adresář `public` a přidejte soubor `index.html` s následujícím obsahem:

            <!DOCTYPE html>
<html>
<head>
  <title>Host Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Přidejte konfigurační soubor Babel `.babelrc`:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

Aktualizujte svůj `package.json` o startovací skript:

            {
  "name": "host-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
            

              
                Copy
              
            
          

2. Nastavení vzdálené aplikace (Plugin Container)

Vytvořte nový projektový adresář pro plugin:

            mkdir plugin-app
cd plugin-app
npm init -y
            

              
                Copy
              
            
          

Nainstalujte Webpack a jeho závislosti:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Vytvořte soubor `webpack.config.js` v adresáři `plugin-app` s následující konfigurací:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3001,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Plugin',
      filename: 'remoteEntry.js',
      exposes: {
        './PluginComponent': './src/PluginComponent',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

Vysvětlení:

• `name`: Název vzdáleného kontejneru (pluginu). Toto **musí** odpovídat názvu použitému v konfiguraci `remotes` hostitele.
• `filename`: Název souboru vzdáleného vstupu (remote entry file), který hostitel načte.
• `exposes`: Definuje moduly, které jsou vystaveny vzdáleným kontejnerem. V tomto případě vystavujeme modul `PluginComponent`. Klíč './PluginComponent' se používá v importním příkazu hostitele (např. `import('plugin/PluginComponent')`).
• `shared`: Stejně jako hostitel, uvádí sdílené závislosti. Je životně důležité, aby sdílené závislosti a jejich verze byly kompatibilní mezi hostitelem a vzdáleným serverem.

Vytvořte adresář `src` a přidejte soubor `PluginComponent.jsx` s následujícím obsahem:

            import React from 'react';

const PluginComponent = () => {
  return (
    <div style={{border: '1px solid blue', padding: '10px'}}>
      <h2>Plugin Component</h2>
      <p>This is a dynamically loaded plugin!</p>
    </div>
  );
};

export default PluginComponent;

            

              
                Copy
              
            
          

Vytvořte soubor `index.js` v adresáři `src` pro export PluginComponent:

            import PluginComponent from './PluginComponent';

export default PluginComponent;
            

              
                Copy
              
            
          

Vytvořte adresář `public` a přidejte soubor `index.html` s následujícím obsahem:

            <!DOCTYPE html>
<html>
<head>
  <title>Plugin Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Přidejte konfigurační soubor Babel `.babelrc`:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

Aktualizujte svůj `package.json` o startovací skript:

            {
  "name": "plugin-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
            

              
                Copy
              
            
          

3. Spuštění aplikací

Spusťte hostitelskou i pluginovou aplikaci spuštěním `npm start` v jejich příslušných adresářích.

Přejděte na `http://localhost:3000` ve svém prohlížeči. Měli byste vidět hostitelskou aplikaci s dynamicky načtenou pluginovou komponentou.

Pokročilé funkce a úvahy

Verzování a vrácení změn

Module Federation podporuje verzování, což vám umožňuje spravovat různé verze pluginů. Omezení verzí můžete specifikovat v konfiguraci `remotes` hostitele. Například:

            remotes: {
  'plugin': 'Plugin@http://localhost:3001/remoteEntry.js@1.0.0',
}
            

              
                Copy
              
            
          

To říká hostiteli, aby použil verzi 1.0.0 pluginu. Pokud je k dispozici novější verze, hostitel bude nadále používat zadanou verzi, dokud nebude explicitně aktualizována. Implementace robustního verzování je zásadní pro zabránění zásadním změnám a zajištění stability aplikace.

Bezpečnostní úvahy

Při používání Module Federation je bezpečnost nanejvýš důležitá. Zvažte následující:

• Ověřování a autorizace: Implementujte správné mechanismy ověřování a autorizace, abyste zajistili, že k pluginům mohou přistupovat a používat je pouze autorizovaní uživatelé.
• Integrita kódu: Ověřte integritu vzdálených modulů, abyste zabránili vkládání škodlivého kódu do aplikace. Zvažte použití Content Security Policy (CSP) k omezení zdrojů, ze kterých může aplikace načítat zdroje.
• Správa závislostí: Pečlivě spravujte závislosti hostitelského i vzdáleného kontejneru, abyste se vyhnuli zranitelnostem. Pravidelně aktualizujte závislosti na nejnovější verze.
• Validace vstupu: Validujte všechna data přijatá ze vzdálených modulů, abyste zabránili injekčním útokům.
• CORS (Cross-Origin Resource Sharing): Správně nakonfigurujte CORS, abyste umožnili hostitelské aplikaci přístup k souboru vzdáleného vstupu z pluginové aplikace.

Objevování a správa pluginů

Pro složitější pluginové systémy můžete potřebovat mechanismus pro objevování a správu pluginů. Toho lze dosáhnout prostřednictvím registru pluginů nebo služby pro objevování. Centrální registr může ukládat informace o dostupných pluginech, včetně jejich umístění, verze a závislostí. Hostitelská aplikace pak může dotazovat registr, aby našla a načetla příslušné pluginy.

Zvažte tyto přístupy:

• Centralizovaná konfigurace: Ukládejte adresy URL pluginů do centrálního konfiguračního souboru (např. soubor JSON), který hostitelská aplikace čte za běhu. To vám umožní snadno přidávat, odstraňovat nebo aktualizovat pluginy bez opětovného nasazení hostitelské aplikace.
• Objevování založené na API: Vytvořte koncový bod API, který vrátí seznam dostupných pluginů. Hostitelská aplikace pak může tento seznam načíst a dynamicky načíst pluginy.
• Architektura řízená událostmi: Použijte sběrnici událostí nebo frontu zpráv k oznámení hostitelské aplikaci, když jsou k dispozici nové pluginy. To umožňuje asynchronní objevování a načítání pluginů.

Dynamická konfigurace a aktivace pluginů

Umožnění uživatelům dynamicky konfigurovat a aktivovat pluginy je mocná funkce. To vyžaduje mechanismus pro ukládání a správu konfigurací pluginů. Pro ukládání nastavení pluginů můžete použít databázi, konfigurační soubor nebo cloudovou konfigurační službu. Hostitelská aplikace pak může tato nastavení číst za běhu a podle toho aktivovat pluginy. Zvažte poskytnutí uživatelského rozhraní pro správu konfigurací pluginů.

Zpracování asynchronních operací a chyb

Při práci s dynamicky načítanými pluginy je nezbytné elegantně zpracovávat asynchronní operace a chyby. Použijte `async/await` nebo Promise ke správě asynchronního kódu. Implementujte správné zpracování chyb k zachycení a zaznamenání všech chyb, které se vyskytnou během načítání nebo provádění pluginu. Poskytněte uživateli informativní chybové zprávy. Zvažte použití centralizované služby pro zaznamenávání chyb ke sledování chyb napříč všemi pluginy.

Rozdělení kódu a optimalizace výkonu

Pro optimalizaci výkonu použijte rozdělení kódu (code splitting) k rozdělení aplikace a pluginů na menší části. To umožňuje prohlížeči stahovat pouze kód, který je potřeba pro konkrétní stránku nebo funkci. Webpack poskytuje vestavěnou podporu pro rozdělení kódu. Zvažte použití líného načítání k načítání pluginů pouze tehdy, když jsou potřeba. Minifikujte a komprimujte kód, abyste zmenšili velikost souboru.

Testování a kontinuální integrace

Důkladně otestujte svůj pluginový systém, abyste se ujistili, že funguje správně. Napište unit testy, integrační testy a end-to-end testy. Použijte systém kontinuální integrace (CI) k automatickému spouštění testů, kdykoli dojde ke změně kódu. Implementujte pipeline kontinuálního doručování (CD) pro automatizaci nasazení aplikace a pluginů.

Příklady z reálného světa a případy použití

Module Federation se používá v různých aplikacích v reálném světě, včetně:

• E-commerce platformy: Dynamické načítání doporučení produktů, platebních bran a poskytovatelů dopravy. Například globální e-commerce platforma by mohla použít Module Federation k integraci různých platebních poskytovatelů na základě polohy zákazníka. V Severní Americe by mohla načíst plugin pro Stripe, zatímco v Evropě by mohla načíst plugin pro PayPal nebo Klarna.
• Systémy pro správu obsahu (CMS): Umožnění uživatelům instalovat a aktivovat pluginy pro rozšíření funkčnosti CMS. CMS by mohlo uživatelům umožnit instalovat pluginy pro optimalizaci SEO, integraci sociálních médií nebo analýzu obsahu.
• Dashboardy a analytické platformy: Dynamické načítání různých widgetů a vizualizací. Globální analytická platforma by mohla načíst pluginy pro různé zdroje dat, jako je Google Analytics, Adobe Analytics nebo Salesforce.
• Architektury mikrofrontendu: Budování rozsáhlých webových aplikací jako sbírky nezávisle nasaditelných mikrofrontendu. Velký podnik by mohl použít Module Federation k vybudování své webové aplikace jako sbírky mikrofrontendu, z nichž každý je zodpovědný za konkrétní obchodní funkci, jako je správa účtů, katalog produktů nebo zpracování objednávek.
• Designové systémy: Sdílení komponent uživatelského rozhraní a designových tokenů napříč více aplikacemi. Globální organizace s více značkami by mohla použít Module Federation ke sdílení společného designového systému napříč všemi svými aplikacemi, což zajišťuje konzistenci a snižuje úsilí při vývoji.

Osvědčené postupy pro budování dynamických pluginových systémů s Module Federation

Zde jsou některé osvědčené postupy, které je třeba mít na paměti při budování dynamických pluginových systémů s Module Federation:

• Udržujte pluginy malé a zaměřené: Každý plugin by měl být zodpovědný za konkrétní část funkcionality. To usnadňuje údržbu a aktualizaci pluginů.
• Definujte jasná rozhraní pluginů: Definujte jasná rozhraní pro to, jak pluginy interagují s hostitelskou aplikací. Tím se zajistí, že pluginy jsou kompatibilní s hostitelem a zabrání se zásadním změnám.
• Používejte sémantické verzování: Používejte sémantické verzování ke správě verzí vašich pluginů. To usnadňuje sledování změn a zajištění kompatibility.
• Poskytněte dokumentaci: Poskytněte jasnou a stručnou dokumentaci pro vaše pluginy. To pomáhá uživatelům pochopit, jak pluginy instalovat, konfigurovat a používat.
• Implementujte osvědčené bezpečnostní postupy: Dodržujte osvědčené bezpečnostní postupy k ochraně vaší aplikace a pluginů před zranitelnostmi.
• Sledujte výkon pluginů: Sledujte výkon vašich pluginů, abyste identifikovali případná úzká místa. Optimalizujte kód pro zlepšení výkonu.
• Automatizujte nasazení: Automatizujte nasazení vaší aplikace a pluginů. Tím se snižuje riziko chyb a zajišťuje se rychlé nasazení aktualizací.
• Používejte konzistentní styl kódování: Vymáhejte konzistentní styl kódování napříč všemi pluginy. To usnadňuje čtení a údržbu kódu.
• Napište unit testy: Napište unit testy pro vaše pluginy, abyste se ujistili, že fungují správně.
• Používejte linter: Používejte linter k automatické kontrole kódu na chyby.

Závěr

JavaScript Module Federation poskytuje výkonný a flexibilní mechanismus pro budování dynamických pluginových systémů. Využitím Module Federation můžete vytvářet modulární, škálovatelné a udržitelné aplikace, které se mohou přizpůsobit měnícím se požadavkům. Dodržováním osvědčených postupů uvedených v tomto článku můžete budovat robustní a bezpečné pluginové systémy, které splňují potřeby vaší organizace.

Tato technologie je obzvláště cenná v mezinárodních souvislostech, neboť umožňuje podnikům přizpůsobit své softwarové nabídky konkrétním regionům nebo segmentům zákazníků bez nasazování zcela oddělených aplikací. Od integrace lokálních platebních bran po dodávání regionálně specifického obsahu, Module Federation usnadňuje personalizovanější a efektivnější uživatelskou zkušenost globálně.